<script>
export default {
    name: "AddProduct"
}
</script>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Goods_Category, Goods_Manage } from '@/api';
import { useRouter, useRoute } from 'vue-router'
import UploadPhoto from '@/components/UploadPhoto.vue';
import UpVideo from '@/components/UpVideo.vue';
import MyEditor from '@/components/MyEditor.vue';
import UserTags from "@/components/UserTags.vue";
import draggable from 'vuedraggable'

// 返回
let router = useRouter();
let goBack = () => {
    router.go(-1);
}

// 基础信息
let virtual = reactive([
    { id: 0, tit: '普通商品', tit2: '物流发货' },
    { id: 1, tit: '卡密/网盘', tit2: '自动发货' },
    { id: 2, tit: '优惠券', tit2: '自动发货' },
    { id: 3, tit: '虚拟商品', tit2: '虚拟发货' },
])

let selectItem = (item) => {
    goodsInfo.virtual_type = item.id;
}

// 添加
let activeName = ref('baseInfo')
let form_ref = ref(null);
let attr_obj = reactive({
    bar_code: '',
    brokerage: '',
    brokerage_two: 0,
    cost: 0,
    coupon_id: 0,
    ot_price: 0,
    pic: '',
    price: 0,
    stock: 0,
    vip_price: 0,
    virtual_list: [],
    volume: 0,
    weight: 0,
    spec_type: 0,
})
let goodsInfo = reactive({
    // 基础信息
    virtual_type: 0,
    store_name: '',
    cate_id: [],
    unit_name: '',
    slider_image: [],
    video_open: false,
    video_link: '',
    vcate: 1,
    is_show: 1,
    spec_type: 0,
    // 商品详情
    description: '',
    activity: [
        { id: 1, title: '拼团', bgColor: '#feb900' },
        { id: 2, title: '默认', bgColor: '#ed4014' },
        { id: 3, title: '砍价', bgColor: '#009688' },
        { id: 4, title: '秒杀', bgColor: '#1e9fff' }
        // '拼团', '默认', '砍价', '秒杀'
    ],
    recommend: [],
    recommend_list: [],
    custom_form: [],
    message: 1,
    label_id: [],
    // 物流设置
    postage: 0,
    logistics: ["1"],
    ficti: 0,
    sort: 0,
    give_integral: 0,
    pic: '',
    price: 0,
    cost: 0,
    ot_price: 0,
    stock: 0,
    bar_code: '',
    weight: 0,
    volume: 0,
    freight: '2',
    attrs: [],
})
let rules = reactive({
    cate_id: [
        { required: true, message: '请选择商品分类', trigger: 'blur' },
    ],
    store_name: [
        { required: true, message: '请输入商品名称', trigger: 'blur' },
    ],
    unit_name: [
        { required: true, message: '请输入单位', trigger: 'blur' },
    ],
    slider_image: [
        { required: true, message: '请上传商品轮播图', trigger: 'change' },
    ],
    pic: [
        { required: true, message: '请上传商品图片', trigger: 'change' },
    ],
})

let options = ref([])
let options_list = async () => {
    let { status, msg, data } = await Goods_Category.tree_list(1);
    if (status === 200) {
        options.value = data;
    }
}

// 获取规则模板
let rule_options = ref([])
let get_goods_rule = async () => {
    let { status, msg, data } = await Goods_Manage.get_goods_rule();
    if (status === 200) {
        rule_options.value = data;
    } else {
        ElMessage.error(msg);
    }
}

// 运费模板
let template = ref([])
let get_template = async () => {
    let { status, msg, data } = await Goods_Manage.get_template();
    if (status === 200) {
        template.value = data;
    }
}

// 商品推荐图
let recommend = ref(false)
let handleRecommend = () => {
    recommend.value = true;
}

// 图片选择器
let is_show = ref(false)
let handleSliderImg = (url) => {
    if (url) {
        goodsInfo.slider_image.push(url);
        is_show.value = false
    }
}

// 标签组件
let tags_show = ref(false)
let selected_tags = ref([])
let handleTagsConfirm = (data) => {
    selected_tags = data;
    tags_show.value = false;
}
let handleSelectedId = (ids) => {
    goodsInfo.label_id = ids;
}

// 添加规格模板
let add_rule_visible = ref(false)
let add_rule_form = ref(null)
let addRuleForm = reactive({
    rule_name: '',
})
let addRuleRules = reactive({
    rule_name: [
        { required: true, message: '请输入规格名称', trigger: 'blur' },
    ],
})
let rule_content = ref(true)
let handleAddRuleClose = () => {
    add_rule_form.value.resetFields();
}

// 标签设置
let spec = ref([])
let value = ref('')
let detail = ref([])
let ruleNum = ref('')
let inputValue = ref([])
let inputVisible = ref(false)
let InputRef = ref('')
let addNewSpecs = () => {
    detail.value.push(ruleNum.value);
    let rule = Object.assign({}, { value: value.value }, { detail: detail.value });
    if (rule.value) {
        spec.value.push(rule);
        rule_content.value = true;
        detail.value = [];
    } else {
        ElMessage.error("请输入对应的值！");
    }
}
let handleSpecsTem = () => {
    console.log(Object.assign({ rule_name: addRuleForm.rule_name }, { spec: spec.value }));
}
let handleSpecNameClose = (tag, detail) => {
    let index = detail.indexOf(tag);
    detail.splice(index, 1);
}
let handleValueClose = (item, spec) => {
    let index = spec.findIndex(tag => tag.value === item);
    spec.splice(index, 1);
}
let handleInputConfirm = (detail, index) => {
    if (inputValue.value[index]) {
        detail.push(inputValue.value[index])
    }
    inputVisible.value = false
    inputValue.value[index] = ''
}
let showInput = () => {
    inputVisible.value = true;
}
let handleAddNewRule = () => {
    value.value = '';
    ruleNum.value = '';
    rule_content.value = false;
}

// 添加分类
let add_cate_visible = ref(false)
let addCateForm = reactive({
    sort: 0,
    is_show: 1,
})
let ref_add_cate = ref(null)
let pic_show = ref(false)
let big_pic_show = ref(false)
let addCateRules = reactive({
    cate_name: [
        { required: true, message: '请输入分类名称', trigger: 'change' },
    ],
})
let superior_cate = ref([])
let handleAddCate = async () => {
    let { status, data } = await Goods_Category.add_cate_list();
    if (status === 200) {
        superior_cate.value = data.rules[0].options;
        addCateForm.pid = 0;
        add_cate_visible.value = true;
    }
}
let handlePicShow = () => {
    pic_show.value = false;
}
let handleAddCateSub = async () => {
    let { status, msg } = await Goods_Category.add_cate(addCateForm);
    if (status === 200) {

    }
}

// 规格库存
let rule_show = ref(false)

// 营销设置
let checkList = ref([])
// 隐藏下拉菜单
let label_ref = ref(null)
let closeDropMenu = () => {
    label_ref.value.blur();
}

// 商品列表
let goods_list_visible = ref(false)
let goodsListData = ref([])
let selectedExcellent = ref([])
let handleExcellent = async () => {
    let { status, data } = await Goods_Manage.product_list();
    if (status === 200) {
        goodsListData.value = data.list;
        goods_list_visible.value = true;
    }
}
let handleSelectionList = (val) => {
    selectedExcellent.value = val;
}
let handleSubExcellent = () => {
    goodsInfo.recommend_list = selectedExcellent.value;
    goods_list_visible.value = false;
}
let handleExcellentDel = (index) => {
    goodsInfo.recommend_list.splice(index, 1);
}

// 其他设置
// 自定义留言
let addFormItem = () => {
    if (goodsInfo.custom_form.length >= 10) return;
    goodsInfo.custom_form.push({
        title: '',
        label: 'text',
        value: "",
        status: false
    });
};
let removeFormItem = (index) => {
    goodsInfo.custom_form.splice(index, 1);
};
let custom_select = ref([
    { label: '文本框', value: 'text' },
    { label: '数字', value: 'number' },
    { label: '邮件', value: 'email' },
    { label: '日期', value: 'data' },
    { label: '时间', value: 'time' },
    { label: '身份证', value: 'id' },
    { label: '手机号', value: 'phone' },
    { label: '图片', value: 'img' },
])

// 添加商品
let handleAddGoods = () => {
    form_ref.value.validate(async (valid) => {
        if (valid) {
            goodsInfo.attrs.push(attr_obj);
            let { status, msg } = await Goods_Manage.set_goods(0, goodsInfo);
            if (status === 200) {
                ElMessage.success(msg);
                // 跳转页面
                let { redirect } = route.query;
                if (redirect) {
                    // 重定向
                    router.replace(redirect);
                } else {
                    // 默认跳转
                    router.push('/admin/product/product_list');
                }
            } else {
                ElMessage.error(msg);
            }
        }
    })
}

// 编辑部分
let route = useRoute();
let edit_id = ref('')
let handleEditId = async () => {
    edit_id.value = route.query.product_id;
    if (edit_id.value) {
        let { status, data } = await Goods_Manage.product_detail(edit_id.value);
        let { status: options_status, data: options_data } = await Goods_Category.tree_list(1);
        if (status === 200 && options_status === 200) {
            options.value = options_data;
            goodsInfo.virtual_type = data.productInfo.virtual_type;
            goodsInfo.store_name = data.productInfo.store_name;
            options.value.forEach(item => {
                let id = item.id.toString();
                if (data.productInfo.cate_id.includes(id)) {
                    goodsInfo.cate_id.push(item.html + item.cate_name);
                }
            })
            goodsInfo.slider_image = data.productInfo.slider_image;
            goodsInfo.unit_name = data.productInfo.unit_name;
            goodsInfo.video_link = data.productInfo.video_link;
            attr_obj.bar_code = data.productInfo.attr.bar_code;
            attr_obj.brokerage = data.productInfo.attr.brokerage;
            attr_obj.brokerage_two = data.productInfo.attr.brokerage_two;
            attr_obj.cost = data.productInfo.attr.cost;
            attr_obj.coupon_id = data.productInfo.attr.coupon_id;
            attr_obj.ot_price = data.productInfo.attr.ot_price;
            attr_obj.pic = data.productInfo.attr.pic;
            attr_obj.price = data.productInfo.attr.price;
            attr_obj.stock = data.productInfo.attr.stock;
            attr_obj.vip_price = data.productInfo.attr.vip_price;
            attr_obj.virtual_list = data.productInfo.attr.virtual_list;
            attr_obj.volume = data.productInfo.attr.volume;
            attr_obj.weight = data.productInfo.attr.weight;
            attr_obj.spec_type = data.productInfo.spec_type;
            goodsInfo.description = data.productInfo.description;
            goodsInfo.logistics = data.productInfo.logistics;
            goodsInfo.freight = data.productInfo.freight;
            goodsInfo.temp_id = data.productInfo.temp_id;
            goodsInfo.postage = data.productInfo.postage;
            goodsInfo.ficti = data.productInfo.ficti;
            goodsInfo.sort = data.productInfo.sort;
            goodsInfo.give_integral = data.productInfo.give_integral;
            goodsInfo.vip_product = data.productInfo.vip_product;
            goodsInfo.is_limit = data.productInfo.is_limit;
            goodsInfo.limit_num = data.productInfo.limit_num;
            goodsInfo.presale = data.productInfo.presale;
            goodsInfo.presale_time = data.productInfo.presale_time;
            goodsInfo.presale_day = data.productInfo.presale_day;
            goodsInfo.recommend = data.productInfo.recommend;
            goodsInfo.recommend_list = data.productInfo.recommend_list;
            goodsInfo.keyword = data.productInfo.keyword;
            goodsInfo.store_info = data.productInfo.store_info;
            goodsInfo.command_word = data.productInfo.command_word;
            goodsInfo.recommend_image = data.productInfo.recommend_image;
            goodsInfo.message = data.productInfo.message;
            goodsInfo.custom_form = data.productInfo.custom_form;
        }
    }
}
let handleEditGoods = async () => {
    form_ref.value.validate(async (valid) => {
        if (valid) {
            goodsInfo.attrs.push(attr_obj);
            let { status, msg } = await Goods_Manage.set_goods(edit_id.value, goodsInfo);
            if (status === 200) {
                ElMessage.success(msg);
                // 跳转页面
                let { redirect } = route.query;
                if (redirect) {
                    // 重定向
                    router.replace(redirect);
                } else {
                    // 默认跳转
                    router.push('/admin/product/product_list');
                }
            } else {
                ElMessage.error(msg);
            }
        }
    })
}


onMounted(() => {
    options_list();
    get_goods_rule();
    get_template();
    handleEditId();
})
</script>

<template>
    <el-card class="header-card" shadow="never">
        <el-page-header icon="ArrowLeft" @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3">{{ edit_id ? '编辑商品' : '添加商品' }}</span>
            </template>
        </el-page-header>
    </el-card>
    <el-card class="box-card" shadow="never">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基础信息" name="baseInfo">
                <el-form ref="form_ref" :model="goodsInfo" :rules="rules" label-width="120px" class="demo-ruleForm"
                    status-icon>
                    <el-form-item class="goods-cate" label="商品类型：">
                        <div class="goods-total">
                            <div class="goods-item" v-for="item in virtual" :key="item.id"
                                :class="{ activeClass: item.id === goodsInfo.virtual_type }" @click="selectItem(item)">
                                <div class="goods-top">{{ item.tit }}</div>
                                <div class="goods-bottom">({{ item.tit2 }})</div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="商品分类：" prop="cate_id">
                        <el-select v-model="goodsInfo.cate_id" multiple placeholder="请选择商品分类" style="width: 240px">
                            <el-option v-for="item in options" :key="item.id" :label="item.html + item.cate_name"
                                :value="item.id" :disabled="item.pid === 0" />
                        </el-select>
                        <el-link type="primary" :underline="false" style="margin-left: 15px;"
                            @click="handleAddCate">新增分类</el-link>
                    </el-form-item>
                    <el-form-item label="商品名称：" prop="store_name">
                        <el-input v-model="goodsInfo.store_name" style="width: 300px;" placeholder="请输入商品名称" />
                    </el-form-item>
                    <el-form-item label="单位：" prop="unit_name">
                        <el-input v-model="goodsInfo.unit_name" style="width: 300px;" placeholder="请输入单位" />
                    </el-form-item>
                    <el-form-item label="商品轮播图：" prop="slider_image">
                        <!-- 图片显示 -->
                        <el-upload class="avatar-uploader" disabled @click="is_show = true;">
                            <img v-if="goodsInfo.slider_image.length" :src="goodsInfo.slider_image[0]" class="avatar"
                                style="width: 100px;height: 100px;" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                        <UploadPhoto :is_show="is_show" @change="handleSliderImg">
                        </UploadPhoto>
                    </el-form-item>
                    <el-form-item label="添加视频：">
                        <el-switch v-model="goodsInfo.video_open" :active-value="true" :inactive-value="false" inline-prompt
                            active-text="开启" inactive-text="关闭" />
                    </el-form-item>
                    <el-form-item label="视频类型：" v-show="goodsInfo.video_open">
                        <el-radio-group v-model="goodsInfo.vcate" class="ml-4">
                            <el-radio :label="1" size="large">本地视频</el-radio>
                            <el-radio :label="2" size="large">视频链接</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-show="goodsInfo.video_open && goodsInfo.vcate === 1">
                        <div class="video-upload">
                            <div v-show="goodsInfo.vcate === 1">
                                <UpVideo v-model="goodsInfo.video_link"></UpVideo>
                            </div>
                            <div v-show="goodsInfo.vcate === 0">
                                <el-input v-model="goodsInfo.video_link" style="width: 200px;" placeholder="请输入视频链接">
                                </el-input>
                            </div>
                            <div class="video-tips">建议时长：9～30秒，视频宽高比16:9</div>
                        </div>
                    </el-form-item>
                    <el-form-item v-show="goodsInfo.video_open && goodsInfo.vcate === 2">
                        <el-input v-model="goodsInfo.video_link" style="width: 200px;" placeholder="请输入视频地址" />
                    </el-form-item>
                    <el-form-item label="商品状态：">
                        <el-radio-group v-model="goodsInfo.is_show" class="ml-4">
                            <el-radio :label="1" size="large">上架</el-radio>
                            <el-radio :label="2" size="large">下架</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="activeName = 'stock'">下一步</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="规格库存" name="stock">
                <el-form ref="form_ref" :model="goodsInfo" :rules="rules" label-width="120px" class="demo-ruleForm"
                    status-icon>
                    <el-form-item label="商品规格：">
                        <el-radio-group v-model="attr_obj.spec_type" class="ml-4">
                            <el-radio :label="0" size="large">单规格</el-radio>
                            <el-radio :label="1" size="large">多规格</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div v-show="attr_obj.spec_type === 0">
                        <el-form-item label="图片：" prop="pic">
                            <el-upload class="avatar-uploader" disabled @click="rule_show = true;">
                                <img v-if="attr_obj.pic" :src="attr_obj.pic" class="avatar"
                                    style="width: 100px;height: 100px;" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                            <UploadPhoto :is_show="rule_show" v-model="attr_obj.pic" @change="rule_show = false">
                            </UploadPhoto>
                        </el-form-item>
                        <el-form-item label="售价：">
                            <el-input-number v-model="attr_obj.price" :min="0" class="mx-4" controls-position="right" />
                        </el-form-item>
                        <el-form-item label="成本价：">
                            <el-input-number v-model="attr_obj.cost" :min="0" class="mx-4" controls-position="right" />
                        </el-form-item>
                        <el-form-item label="原价：">
                            <el-input-number v-model="attr_obj.ot_price" :min="0" class="mx-4" controls-position="right" />
                        </el-form-item>
                        <el-form-item label="库存：">
                            <el-input-number v-model="attr_obj.stock" :min="0" class="mx-4" controls-position="right" />
                        </el-form-item>
                        <el-form-item label="商品编号：">
                            <el-input v-model="attr_obj.bar_code" style="width: 150px;" />
                        </el-form-item>
                        <el-form-item label="重量(KG)：">
                            <el-input-number v-model="attr_obj.weight" :min="0" class="mx-4" controls-position="right" />
                        </el-form-item>
                        <el-form-item label="体积(m³)：">
                            <el-input-number v-model="attr_obj.volume" :min="0" class="mx-4" controls-position="right" />
                        </el-form-item>
                    </div>
                    <div v-show="attr_obj.spec_type === 1">
                        <el-form-item label="选择规格：">
                            <el-select v-model="goodsInfo.rule_index" class="m-2" placeholder="请选择">
                                <el-option v-for="(item, index) in rule_options" :key="item.id" :label="item.rule_name"
                                    :value="index" />
                            </el-select>
                            <el-button type="primary">确定</el-button>
                            <el-button @click="add_rule_visible = true">添加规格模板</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Plus">添加新规格</el-button>
                            <el-button type="success">立即生成</el-button>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <el-button @click="activeName = 'baseInfo'">上一步</el-button>
                        <el-button type="primary" @click="activeName = 'detail'">下一步</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品详情" name="detail">
                <el-form ref="form_ref" :model="goodsInfo" :rules="rules" label-width="120px" status-icon>
                    <div style="display: flex;">
                        <el-form-item label="商品详情：">
                            <MyEditor v-model="goodsInfo.description"></MyEditor>
                        </el-form-item>
                        <div class="details-preview">
                            <div class="detail">详情预览</div>
                            <div class="preview" v-html="goodsInfo.description"></div>
                        </div>
                    </div>
                    <el-form-item>
                        <el-button @click="activeName = 'stock'">上一步</el-button>
                        <el-button type="primary" @click="activeName = 'logistics'">下一步</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="物流设置" name="logistics" v-if="goodsInfo.virtual_type === 0">
                <el-form ref="form_ref" :model="goodsInfo" :rules="rules" label-width="120px" status-icon>
                    <el-form-item label="物流方式：">
                        <el-checkbox-group v-model="goodsInfo.logistics">
                            <el-checkbox label="1">快递</el-checkbox>
                            <el-checkbox label="2">到店核销</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="运费设置：">
                        <el-radio-group v-model="goodsInfo.freight" class="ml-4">
                            <el-radio :label="2">固定运费</el-radio>
                            <el-radio :label="3">运费模板</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item v-show="goodsInfo.freight === 2">
                        <el-input-number v-model="goodsInfo.postage" :min="0" class="mx-4" controls-position="right"
                            placeholder="请输入金额" />
                    </el-form-item>
                    <el-form-item v-show="goodsInfo.freight === 3">
                        <el-select v-model="goodsInfo.temp_id" clearable placeholder="请选择运费模板">
                            <el-option v-for="item in template" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="activeName = 'stock'">上一步</el-button>
                        <el-button type="primary" @click="activeName = 'marketing'">下一步</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="营销设置" name="marketing">
                <el-form ref="form_ref" :model="goodsInfo" :rules="rules" label-width="140px" status-icon>
                    <el-form-item label="已售数量：">
                        <el-input-number v-model="goodsInfo.ficti" :min="0" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="排序：">
                        <el-input-number v-model="goodsInfo.sort" :min="0" controls-position="right" />
                    </el-form-item>
                    <el-divider border-style="dashed" />
                    <el-form-item label="购买送积分：">
                        <el-input-number v-model="goodsInfo.give_integral" :min="0" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="购买送优惠券：">
                        <el-button type="primary">添加优惠券</el-button>
                    </el-form-item>
                    <el-form-item label="关联用户标签：">
                        <el-select @click="tags_show = true;" v-model="selected_tags" multiple placeholder="请选择用户关联标签"
                            style="width: 240px;" ref="label_ref" @focus="closeDropMenu">
                        </el-select>
                        <UserTags :is_show="tags_show" @confirm="handleTagsConfirm" @close="tags_show = false"
                            @tagId="handleSelectedId">
                        </UserTags>
                    </el-form-item>
                    <el-divider border-style="dashed" />
                    <el-form-item label="付费会员专属：">
                        <div class="vip-exclusive">
                            <el-switch v-model="goodsInfo.vip_product" inline-prompt active-text="开启" inactive-text="关闭" />
                            <div class="tips">开启后仅付费会员可以看见并购买此商品</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="单独设置：">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox :label="1" size="large">佣金设置(数字既返佣金额)</el-checkbox>
                            <el-checkbox :label="2" size="large">付费会员价</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="批量设置：" v-show="checkList.length">
                        <table border style="border: 1px solid #ccc;border-collapse: collapse;">
                            <thead>
                                <tr>
                                    <th>图片</th>
                                    <th>售价</th>
                                    <th>成本价</th>
                                    <th>原价</th>
                                    <th v-if="checkList.includes(1)">一级返佣</th>
                                    <th v-if="checkList.includes(1)">二级返佣</th>
                                    <th v-if="checkList.includes(2)">会员价</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="width: 100px;text-align: center;">
                                        <el-image style="width: 50px; height: 50px" :src="attr_obj.pic" fit="fill" />
                                    </td>
                                    <td>
                                        <div style="width: 125px;font-size: 12px;text-align: center;">
                                            {{ attr_obj.price }}
                                        </div>
                                    </td>
                                    <td>
                                        <div style="width: 125px;font-size: 12px;text-align: center;">
                                            {{ attr_obj.cost }}
                                        </div>

                                    </td>
                                    <td>
                                        <div style="width: 125px;font-size: 12px;text-align: center;">
                                            {{ attr_obj.ot_price }}
                                        </div>

                                    </td>
                                    <td v-if="checkList.includes(1)">
                                        <el-input-number v-model="attr_obj.brokerage" :precision="2" value-on-clear="min"
                                            :min="0" controls-position="right" style="width: 125px;font-size: 12px;">
                                        </el-input-number>
                                    </td>
                                    <td v-if="checkList.includes(1)">
                                        <el-input-number v-model="attr_obj.brokerage_two" :precision="2"
                                            value-on-clear="min" :min="0" controls-position="right"
                                            style="width: 125px;font-size: 12px;">
                                        </el-input-number>
                                    </td>
                                    <td v-if="checkList.includes(2)">
                                        <el-input-number v-model="attr_obj.vip_price" :precision="2" value-on-clear="min"
                                            :min="0" controls-position="right" style="width: 125px;font-size: 12px;">
                                        </el-input-number>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </el-form-item>
                    <el-divider border-style="dashed" />
                    <el-form-item label="是否限购：">
                        <el-switch v-model="goodsInfo.is_limit" inline-prompt active-text="开启" inactive-text="关闭" />
                    </el-form-item>
                    <div v-show="goodsInfo.is_limit">
                        <el-form-item label="限购类型：">
                            <div>
                                <el-radio-group v-model="goodsInfo.limit_type">
                                    <el-radio :label="1">单次限购</el-radio>
                                    <el-radio :label="2">永久限购</el-radio>
                                </el-radio-group>
                                <div class="tips">单次限购是限制每次下单最多购买的数量，永久限购是限制一个用户总共可以购买的数量</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="限购数量：">
                            <el-input-number v-model="goodsInfo.limit_num" controls-position="right"
                                style="margin-right: 10px;" :min="0" />件
                        </el-form-item>
                    </div>
                    <el-form-item label="预售商品：">
                        <el-switch v-model="goodsInfo.presale" inline-prompt active-text="开启" inactive-text="关闭" />
                    </el-form-item>
                    <div v-show="goodsInfo.presale">
                        <el-form-item label="预售活动时间：">
                            <div style="width: 200px;">
                                <el-date-picker v-model="goodsInfo.presale_time" type="daterange" range-separator="-"
                                    start-placeholder="Start date" value-format="YYYY-MM-DD" end-placeholder="End date"
                                    size="small" />
                            </div>
                        </el-form-item>
                        <el-form-item label="发货时间：">
                            <span style="padding-right: 10px;">预售活动结束后</span>
                            <el-input-number v-model="goodsInfo.presale_day" controls-position="right" :min="0" />
                            <span style="padding-left: 10px;">天之内</span>
                        </el-form-item>
                    </div>
                    <el-form-item label="商品推荐：">
                        <el-checkbox-group v-model="goodsInfo.recommend">
                            <el-checkbox label="is_hot" size="large">热卖单品</el-checkbox>
                            <el-checkbox label="is_benefit" size="large">促销单品</el-checkbox>
                            <el-checkbox label="is_best" size="large">精品推荐</el-checkbox>
                            <el-checkbox label="is_new" size="large">首发新品</el-checkbox>
                            <el-checkbox label="is_good" size="large">优品推荐</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="活动优先级：">
                        <div class="priority">
                            <draggable :list="goodsInfo.activity" ghost-class="ghost" :force-fallback="true" itemKey="id"
                                chosen-class="chosenClass" animation="300" style="display: flex;">
                                <template #item="{ element }">
                                    <div>
                                        <div class="test" :style="'background-color:' + element.bgColor">
                                            {{ element.title }}
                                        </div>
                                    </div>
                                </template>
                            </draggable>
                            <div class="tips">可拖动按钮调整活动的优先展示顺序</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="选择优品推荐商品：">
                        <div v-show="goodsInfo.recommend_list.length" style="display: flex;margin-right: 10px;">
                            <div v-for="(item, index) in goodsInfo.recommend_list" class="excellent-img">
                                <el-image style="width: 50px; height: 50px" :src="item.image" fit="fill" />
                                <div class="del-icon">
                                    <el-icon @click="handleExcellentDel(index)">
                                        <Close />
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                        <el-upload class="avatar-uploader" :show-file-list="false" disabled @click="handleExcellent">
                            <el-icon class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="activeName = 'logistics'">上一步</el-button>
                        <el-button type="primary" @click="activeName = 'other'">下一步</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="其他设置" name="other">
                <el-form ref="form_ref" :model="goodsInfo" :rules="rules" label-width="120px" status-icon>
                    <el-form-item label="商品关键字：">
                        <el-input v-model="goodsInfo.keyword" placeholder="请输入商品关键字" style="width: 300px;" />
                    </el-form-item>
                    <el-form-item label="商品简介：">
                        <el-input v-model="goodsInfo.store_info" :rows="2" type="textarea" placeholder="请输入商品简介"
                            style="width:300px" />
                    </el-form-item>
                    <el-form-item label="商品口令：">
                        <el-input v-model="goodsInfo.command_word" :rows="2" type="textarea" placeholder="请输入商品口令"
                            style="width:300px" />
                    </el-form-item>
                    <el-form-item label="商品推荐图：">
                        <el-upload class="avatar-uploader" @click="handleRecommend" disabled :show-file-list="false">
                            <img v-if="goodsInfo.recommend_image" :src="goodsInfo.recommend_image" class="avatar"
                                style="width:100px;height:100px" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                            <template #tip>
                                <div class="el-upload__tip">建议比例：5:2</div>
                            </template>
                        </el-upload>
                        <UploadPhoto :is_show="recommend" v-model="goodsInfo.recommend_image" @change="recommend = false">
                        </UploadPhoto>
                    </el-form-item>
                    <el-form-item label="自定义留言：">
                        <el-switch v-model="goodsInfo.message" inline-prompt active-text="开启" :active-value="0"
                            :inactive-value="1" inactive-text="关闭" />
                    </el-form-item>
                    <div v-show="goodsInfo.message === 0">
                        <el-form-item v-for="(item, index) in goodsInfo.custom_form" :key="index">
                            <div class="add-title">
                                <el-input v-model="item.title" :placeholder="`留言标题${index + 1}`" />
                                <el-select v-model="item.label" class="m-2">
                                    <el-option v-for="item in custom_select" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                                <el-checkbox v-model="item.status" label="必填" />
                                <el-button type="primary" link @click="removeFormItem(index)">删除</el-button>
                            </div>
                        </el-form-item>
                        <el-form-item class="el-form-tips">
                            <div>
                                <el-button type="primary" link icon="Plus" style="margin-bottom:20px;"
                                    @click="addFormItem">添加表单</el-button>
                                <span style="font-size:8px;color:#999;display:block;">用户下单时需填写的信息，最多可设置10条</span>
                            </div>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <el-button @click="activeName = 'marketing'">上一步</el-button>
                        <el-button v-show="!edit_id" type="primary" @click="handleAddGoods">保存</el-button>
                        <el-button v-show="edit_id" type="success" @click="handleEditGoods">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-card>

    <!-- 添加规格模板 -->
    <el-dialog v-model="add_rule_visible" width="60%" title="商品规格" @close="handleAddRuleClose">
        <el-form :model="addRuleForm" :rules="addRuleRules" ref="add_rule_form" status-icon>
            <el-form-item label="规格模板名称：" prop="rule_name">
                <el-input v-model="addRuleForm.rule_name" />
            </el-form-item>
            <div>
                <template v-for="(item, index) in spec">
                    <el-form-item>
                        <el-tag closable type="info" @close="handleValueClose(item.value, spec)">
                            {{ item.value }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item>
                        <el-tag v-for="tag in item.detail" :key="tag" closable :disable-transitions="false"
                            class="tag-detail" @close="handleSpecNameClose(tag, item.detail)">
                            {{ tag }}
                        </el-tag>
                        <el-input class="rule-input" v-if="inputVisible" ref="InputRef" v-model="inputValue[index]"
                            size="small" @keyup.enter="handleInputConfirm(item.detail, index)"
                            @blur="handleInputConfirm(item.detail, index)" />
                        <el-button v-else size="small" @click="showInput">
                            请输入属性名称
                        </el-button>
                    </el-form-item>
                </template>
            </div>
            <el-form-item v-show="rule_content">
                <el-button type="primary" icon="Plus" @click="handleAddNewRule">添加新规格</el-button>
            </el-form-item>
            <div class="add-new-rules" v-show="!rule_content">
                <el-form-item label="规格名称：">
                    <el-input v-model="value" placeholder="请输入规格" />
                </el-form-item>
                <el-form-item label="规格值：">
                    <el-input v-model="ruleNum" placeholder="请输入规格值" />
                </el-form-item>
                <el-button type="primary" @click="addNewSpecs">确定</el-button>
                <el-button @click="rule_content = true">取消</el-button>
            </div>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleSpecsTem">确定</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 添加分类 -->
    <el-dialog v-model="add_cate_visible" title="添加分类">
        <el-form ref="ref_add_cate" :model="addCateForm" :rules="addCateRules" label-width="160px" class="demo-ruleForm"
            status-icon>
            <el-form-item label="上级分类" prop="pid">
                <el-select v-model="addCateForm.pid" placeholder="Select" style="width: 100%;">
                    <el-option v-for="item in superior_cate" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类名称" prop="cate_name">
                <el-input v-model="addCateForm.cate_name" placeholder="请输入分类名称" />
            </el-form-item>
            <el-form-item label="分类图标(180*180)" prop="pic">
                <el-upload class="avatar-uploader" @click="pic_show = true;" disabled :show-file-list="false">
                    <img v-if="addCateForm.pic" :src="addCateForm.pic" class="pic-avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <UploadPhoto :is_show="pic_show" v-model="addCateForm.pic" @change="handlePicShow"></UploadPhoto>
            </el-form-item>
            <el-form-item label="分类大图(468*340)" prop="big_pic">
                <el-upload class="avatar-uploader" @click="big_pic_show = true;" disabled :show-file-list="false">
                    <img v-if="addCateForm.big_pic" :src="addCateForm.big_pic" class="pic-avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <UploadPhoto :is_show="big_pic_show" v-model="addCateForm.big_pic" @change="big_pic_show = false">
                </UploadPhoto>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="addCateForm.sort" controls-position="right" :min="0" />
            </el-form-item>
            <el-form-item label="状态" prop="is_show">
                <el-radio-group v-model="addCateForm.is_show">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" style="width: 100%;" @click="handleAddCateSub">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 商品列表 -->
    <el-dialog v-model="goods_list_visible" title="商品列表">
        <el-table ref="multipleTableRef" :data="goodsListData" @selection-change="handleSelectionList">
            <el-table-column type="selection" width="55" />
            <el-table-column property="id" label="商品ID" />
            <el-table-column label="图片">
                <template #default="scope">
                    <el-image style="width: 50px; height: 50px" :src="scope.row.image" fit="fill" />
                </template>
            </el-table-column>
            <el-table-column property="store_name" label="商品名称" width="200" />
            <el-table-column property="cate_name" label="商品分类" width="200" />
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleSubExcellent" style="width:100%;">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.header-card {
    margin-bottom: 20px;
}

.box-card {
    .demo-tabs {
        .demo-ruleForm {
            .goods-cate {
                margin-top: 15px;

                .goods-total {
                    display: flex;
                    text-align: center;
                    position: relative;

                    .goods-item {
                        width: 120px;
                        height: 60px;
                        margin-right: 10px;
                        border: 1px solid #e7e7e7;
                        border-radius: 3px;
                        padding: 8px 0;
                        position: relative;

                        .goods-top {
                            font-size: 14px;
                            font-weight: 600;
                            color: #000000d9;
                        }

                        .goods-bottom {
                            font-size: 12px;
                            font-weight: 400;
                            color: #999;
                        }
                    }
                }
            }
        }
    }
}

.add-new-rules {
    display: flex;
    justify-content: space-between;
}

.el-form-tips {
    .el-form-item__content {
        display: block;
    }

}

.add-title {
    display: flex;
    justify-content: space-between;

    .el-input,
    .el-select,
    .el-checkbox {
        margin-right: 15px;
    }
}

.tag-detail {
    margin-right: 10px;
}

.rule-input {
    display: inline-block;
    width: 200px;
}

.vip-exclusive {
    display: block;

    .tips {
        font-size: 12px;
        color: #999;
    }
}

.details-preview {
    width: 350px;
    height: 580px;
    border: 1px solid #ccc;
    border-radius: 50px;
    text-align: center;

    .detail {
        margin-top: 20px;
    }

    .preview {
        padding: 10px;
        text-align: left;

        p {
            img {
                max-width: 100%;
            }
        }
    }
}

.pic-avatar {
    width: 50px;
    height: 50px;
}

.video-upload {
    .video-tips {
        font-size: 12px;
        color: #999;
    }
}

.bulk-setup {
    display: flex;

    .one-level,
    .two-level,
    .vip {
        margin-right: 20px;
    }
}

.tips {
    font-size: 12px;
    color: #999;
}

.priority {
    .test {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
        padding: 0 10px;
    }
}

.activeClass {
    position: absolute;
    right: 0;
    bottom: 0;
    border: 1px solid #1890ff !important;

    &:before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        border: 12px solid #1890ff;
        border-top-color: transparent;
        border-left-color: transparent;
    }

    &:after {
        content: "";
        width: 5px;
        height: 10px;
        position: absolute;
        right: 4px;
        bottom: 5px;
        border: 1px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        transform: rotate(45deg);
    }
}

.excellent-img {
    position: relative;
    margin-right: 10px;

    .del-icon {
        width: 20px;
        height: 20px;
        border: 1px solid #e7e7e7;
        font-size: 10px;
        border-radius: 50%;
        position: absolute;
        top: -10px;
        right: -10px;
        text-align: center;
        line-height: 20px;
    }

}
</style>

<style>
.details-preview .preview p img {
    max-width: 100%;
}
</style>